<template>
    <div>{{ name }}</div>
</template>

<script lang="ts">
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';

interface DataProps {
}

export default {
    name: '',
    setup() {
        console.log('1-开始创建组件-setup');
        const data: DataProps = reactive({name: 'sivin-liu'});
        onBeforeMount(() => {
            console.log('2.组件挂载页面之前执行----onBeforeMount');
        });
        onMounted(() => {
            console.log('3.-组件挂载到页面之后执行-------onMounted');
        });
        return {
            ...data,
        };

    }
};
</script>

<style lang="scss" scoped>
</style>
